<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        /*最外层的盒子似乎叫做版心*/
        .w{
            width:1226px;
            height:614px;
            /*水平居中*/
            margin: 0 auto;
            background-color: #ff8500;
        }
        .w .left{
            width:234px;
            height:614px;
            background-color: darkblue;
            float: left;
            margin-right: 14px;
        }
        .w .right{
            /*不给ul设置宽度的话，就是把所有八个li当作整体放在一行
            放不下的话就会整体移到下一行
            */

            /*剩下给左边的宽度：1226-(Left-width+Left-margin-right)
            1226-(234+14)=978
            */
            width:978px;/*一个978 能放下4个234*/
            float:left;
        }
        .w .right li{
            width:234px;/*
            (1226-14*4)/5(左边那个宽度也是234，很巧啊)
            剩下给右边的宽度：1226-(Left-width+Left-margin-right)
            */
            height:300px;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: darkred;
            float:left;
        }
        .w .right .last{
            margin-right: 0;
        }


        ul{
            /*去掉li前的黑点*/
            list-style: none;
        }
    </style>
</head>
<body>
<div class="w">
    <div class="left"></div>

    <ul class="right">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>

        <li>5</li>
        <li>2</li>
        <li>3</li>
        <li class="last">8</li>
    </ul>

</div>

</body>
</html>